<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="30">
    <title id="title">新能源车联网综合大数据平台</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
</head>
<style>
    /* AB模版网 做最好的织梦整站模板下载网站 Www.AdminBuy.Cn */
    /* QQ：9490489 */
    /* 仿站：Fang.AdminBuy.Cn */
    /* 素材：Sc.AdminBuy.Cn */
    /* js特效：Js.AdminBuy.Cn */
    @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono");
    html, body {
        height: 100%;
    }

    body {
        background: #0f3854;
        background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
        background-size: 100%;
    }

    p {
        margin: 0;
        padding: 0;
    }

    #clock {
        font-family: "Share Tech Mono", monospace;
        color: #ffffff;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #daf6ff;
        text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
    }
    #clock .time {
        letter-spacing: 0.05em;
        font-size: 80px;
        padding: 5px 0;
    }
    #clock .date {
        letter-spacing: 0.1em;
        font-size: 24px;
    }
    #clock .text {
        letter-spacing: 0.1em;
        font-size: 12px;
        padding: 20px 0 0;
    }
</style>
<body>
<div class="data">

    <div class="data-title">
        <div class="title-left fl"></div>
        <div id="company" style="font-size: 30px;color: white;width: 430px;float: left;text-align: center"></div>
        <div class="title-right fr"></div>
    </div>
    <div class="data-content">
        <div class="con-left fl">
            <div class="left-top">
                <div class="info">
                    <div class="info-title">实时统计</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div class="info-main">
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="img/info-img-1.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>运输中的车辆</p>
                                <p id="run">0</p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="img/info-img-2.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日总运单</p>
                                <p id="bill">0</p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="img/info-img-3.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>待审核运单</p>
                                <p id="audit">0</p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="img/info-img-4.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>待结算运单</p>
                                <p id="settled">0</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-bottom">
                    <div class="title">行业分类</div>
                    <div id="echarts_1" class="charts"></div>
                </div>
            </div>
            <div class="left-bottom">
                <div class="title">近一周运单支出金额（元）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_2" class="charts"></div>
            </div>
        </div>
        <div class="con-center fl">
            <div class="map-num">
                <p>实时行驶车辆(辆)</p>
                <div id="car">
                </div>
            </div>
            <div  id="clock" style="float: right;font-weight: 600;margin-top: 20px; position: absolute;z-index: 100;top: 20px;right: 10px;">
                <p class="date">{{ date }}</p>
                <p class="time" style="font-size: 25px;">{{ time }}</p>
            </div>
            <div class="cen-top" id="map"></div>
            <div class="cen-bottom">
                <div class="title">近一月运单数据（单）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_3" class="charts"></div>
            </div>
        </div>
        <div class="con-right fr">
            <div class="right-top">
                <div class="title">半年发货量（吨）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_4" class="charts"></div>
            </div>
            <div class="right-center">
                <div class="title">月度运单排比（单）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_5" class="charts"></div>
            </div>
            <div class="right-bottom">
                <div class="title">月度运单金额排比（元）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_6" class="charts"></div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>
<script src="js/vue.min.js"></script>
</html>
<script>
    $(function () {
       var user_id = getUrlParam('user_id');
        $.post(
            "http://ah.zhgylgl.com/api/public/index.php/houtai/api/getDataCompany",
            {
                user_id:user_id
            },
            function (msg) {
                if(msg.status == 1){
                    $('#company').html(msg.data.company);
                    $('#title').html(msg.data.company);
                    $('#run').html(msg.data.running);
                    $('#bill').html(msg.data.bill);
                    $('#audit').html(msg.data.audit);
                    $('#settled').html(msg.data.settled);
                    var html = '<span style="display: none">1</span>\n' +
                        '<span style="display: none">1</span>';
                    $.each(msg.data.car_number, function (i, v) {
                        html += '<span>'+v+'</span>'
                    })
                    $('#car').append(html);
                }else{
                    alert(1);
                }

            });
    })
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
</script>
<script type="text/javascript">
    setInterval(function(){ window.location.reload(); }, 300000);
</script>
<script>
    var clock = new Vue({
        el: '#clock',
        data: {
            time: '',
            date: ''
        }
    });

    var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var timerID = setInterval(updateTime, 1000);
    updateTime();
    function updateTime() {
        var cd = new Date();
        clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
        clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
    };

    function zeroPadding(num, digit) {
        var zero = '';
        for(var i = 0; i < digit; i++) {
            zero += '0';
        }
        return (zero + num).slice(-digit);
    }
</script>